<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input
          v-model="searInfo.keyword"
          style="width:120px;marginRight:3px;"
          placeholder="模版标题"
        />
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button class="right" type="primary" @click="createTemplate('create')">新建模版</el-button>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      :height="this.$getTableHeight"
      show-overflow-tooltip
      border
      stripe
    >
      <el-table-column label="模板标题">
        <template slot-scope="scope">{{ scope.row.templateTitle?scope.row.templateTitle:'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="模板内容" show-overflow-tooltip prop="templateContent" />
      <el-table-column width="80" label="是否报备" show-overflow-tooltip prop>
        <template
          slot-scope="scope"
        >{{ scope.row.status ===true ?'已报备':scope.row.status ===false ?"暂未报备":'' }}</template>
      </el-table-column>
      <el-table-column width="80" label="审核状态" show-overflow-tooltip>
        <template slot-scope="scope">{{ getAuditStatus(scope.row.auditStatus) }}</template>
      </el-table-column>
      <el-table-column label="驳回原因" show-overflow-tooltip prop="auditEeason" />
      <el-table-column width="100" label="创建时间" show-overflow-tooltip prop="creationTime" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span v-if="!scope.row.status" class="_primary" @click="createTemplate(scope.row)">编辑</span>
            <span v-if="!scope.row.status" class="_primary" @click="report(scope.row)">报备</span>
            <span
              v-if="scope.row.auditStatus === 1"
              class="_primary"
              @click="openSetting(scope.row)"
            >设置</span>
            <span class="_delete" @click="deleteInfo(scope.row)">删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      center
      :close-on-click-modal="false"
      :title="isCreate ?'新建模版' :'编辑模版'"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="模版标题" prop="appId">
          <el-select v-model="ruleForm.appId" :disabled="isSetting" placeholder="模板类型">
            <el-option
              v-for="item in appIdDTO"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模版标题" prop="templateTitle">
          <el-input v-model="ruleForm.templateTitle" :disabled="isSetting" />
        </el-form-item>
        <el-form-item label="模版内容" prop="templateContent">
          <el-input
            v-model="ruleForm.templateContent"
            :disabled="isSetting"
            type="textarea"
            resize="none"
            :rows="4"
            placeholder="模版内容"
          />
        </el-form-item>
      </el-form>
      <el-table v-if="isSetting" :data="settingTable" stripe>
        <el-table-column prop="no" label="变量序号" />
        <el-table-column prop="variable" label="变量" />
        <el-table-column label="变量名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.variableName" placeholder="请输入内容" />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitVal">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '~/components/commom/pagination';
import mmUrl from '~/utils/utilUrl';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  changeTableHeight
} from '~/utils/util';
import regular from '~/utils/regular';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      isSetting: false,
      appIdDTO: [],
      ruleForm: {
        templateTitle: '',
        templateContent: '',
        id: null,
        appId: null,
        status: false
      },
      rules: {
        templateTitle: regular.require1,
        appId: regular.requireChange,
        templateContent: regular.require1
      },
      dialogVisible: false,
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      copysearInfo: { keyword: '' },
      searInfo: { keyword: '' },
      changeSelectOr: false,
      loading: true,
      totalCount: 0,
      tableData: [],
      isCreate: null,
      settingTable: []
    }
  },
  mounted() {
    this.getInitTableData()
    this.loadCreate()
  },
  methods: {
    getAuditStatus(res) {
      switch (res) {
        case null:
          return '审核中';
          break
        case 1:
          return '审核通过';
          break
        case 2:
          return '审核驳回';
          break
      }
    },
    loadCreate() {
      this.$post({
        url: '/manage/messageTemplate/loadCreateMessageTemplate',
        data: {}
      }).then(res => {
        this.appIdDTO = res.appIdDTO
      })
    },
    report(row) {
      this.isSetting = false
      this.$post({
        url: '/manage/messageTemplate/sendCreateSmsTemplate',
        data: { id: row.id }
      }).then(() => {
        this.getInitTableData()
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    openSetting(row) {
      this.settingTable = []
      this.ruleForm = row
      this.dialogVisible = true
      this.isSetting = true
      var a = this.ruleForm.templateContent.split('}')
      a.forEach((v, index) => {
        var d = v.indexOf('{') !== -1 ? v.substr(v.indexOf('{') + 1) : '';
        d.length
          ? this.settingTable.push({
            no: index,
            variable: d,
            variableName: ''
          })
          : '';
      })
    },
    submitVal() {
      let setMsgData = {}
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if(this.isSetting){
            this.settingTable.forEach(v=>{
              v.messageTemplateId = this.ruleForm.id
            })
            setMsgData.messageTemplateId  = this.ruleForm.id
            setMsgData.messageTemplateMapping = this.settingTable
          }
          this.ruleForm.appId = Number(this.ruleForm.appId)
          this.ruleForm.status = false
          this.$post({
            url:this.isSetting? '/manage/messageTemplate/setMessageTemplateMapping' : this.isCreate
              ? '/manage/messageTemplate/createMessageTemplate'
              : '/manage/messageTemplate/editMessageTemplate',
            data:this.isSetting ? setMsgData : { item: this.ruleForm }
          }).then(() => {
            this.getInitTableData()
            this.$refs['ruleForm'].resetFields()
            this.ruleForm = {}
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.ruleForm = {}
      this.$refs['ruleForm'].resetFields()
    },
    createTemplate(res) {
      this.isSetting = false
      if (res === 'create') {
        this.isCreate = true
      } else {
        this.isCreate = false
        this.editorId = res.id
        this.ruleForm = res
        this.ruleForm.appId = String(this.ruleForm.appId)
      }
      this.dialogVisible = true
      this.isSetting = false
    },
    getInitTableData() {
      this.$post({
        url: mmUrl.message.load,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          }
        }
      }).then(res => {
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        this.loading = false
        changeTableHeight(this)
      })
    },
    deleteInfo(row) {
      const that = this
      _deleteMethods(
        '/manage/messageTemplate/deleteMessageTemplate',
        row,
        that
      ).then(() => {
        that.searchInfoMation('no')
      })
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.message.get, res, that)
    }
  }
}
</script>

<style>
</style>
